<template>
    <page-box>
        <template v-slot:header>
            <ask-breadcrumb>
                <ask-breadcrumb-item name="ExampleHome"></ask-breadcrumb-item>
            </ask-breadcrumb>
        </template>
        <product-list :list="tableData" @item-click="handleItemClick"></product-list>
        <MapLocation></MapLocation>
    </page-box>
</template>

<script lang="ts">
import { Component, Mixins } from "vue-property-decorator";
import ExampleRouters from "@/router/example.router";
import FormMixin from "@/mixins/form.mixin.base.ts";

import ProductList from "./components/product/index.vue";
import MapLocation from "@/components/map-location/index.vue";

// const mock = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// console.log("ExampleRouters", FormMixin, ExampleRouters, RouterConfig);
// const ExampleRoutersList: any[] = ExampleRouters.filter((cur: any) => {
//     return cur.meta ? cur.meta.isMenu : true;
// });
@Component({
    name: "Example",
    components: {
        ProductList,
        MapLocation
    }
})
export default class Example extends Mixins(FormMixin) {
    tableData = ExampleRouters.slice(1);
    mounted() {
        // console.log("ExampleRouters", ExampleRouters);
    }

    handleItemClick(item: any) {
        this.$router.push({ name: item.name || "" });
    }
}
</script>
<style lang="scss">

</style>
